﻿
@{
    ViewBag.Title = "设置查看";
}
<div class="title-content">设置查看</div>
<style type="text/css">
    .td-text-center {
        text-align: center;
    }

    .checkbox2 {
        border: 1px solid #b2b2b2;
        box-sizing: border-box;
        height: 20px;
        width: 20px;
    }
    /*班级样式*/
    .banjitd {
        text-align: center;
    }

    .banjick {
        text-align: center;
        width: 40px;
    }

    tr td {
        text-align: center !important;
        display: table-cell !important;
        vertical-align: middle !important;
    }
</style>
<div class="row">
    @*<div class="col-md-6">
            <div class="btn-group">
                <a class="btn sbold green" href="#addClass" data-toggle="modal">新增班级</a>
            </div>
        </div>*@
    <div class="col-md-12">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet light ">
            <div class="portlet-body">
                <div class="dataTables_wrapper no-footer">
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="dataTables_length" id="sample_1_length">
                                <label>
                                    显示条数 <select id="changePageSize" onchange="pageSizeChange()" class="form-control input-sm input-xsmall input-inline">
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="50">50</option>
                                    </select>
                                </label>
                            </div>
                        </div>
                        @*<div class="col-md-6 col-sm-6">
                                <div id="sample_1_filter" class="dataTables_filter">
                                    <label><input type="text" id="schoolInput" class="form-control input-sm input-inline" style="width:200px;" placeholder="班级名称" /></label>
                                    <button type="button" class="btn btn-sm blue" onclick="search()">查找<i class="fa fa-search"></i></button>
                                </div>
                            </div>*@
                    </div>
                    <div class="table-scrollable">
                        <table class="table table-striped table-bordered table-hover order-column dataTable no-footer">
                            <thead>
                                <tr role="row">
                                    <th class="td-text-center" style="width: 200px;">班级名称</th>
                                    <th class="td-text-center" style="width:110px;">查看签到视频截止日期</th>
                                    <th class="td-text-center" style="width:110px;">班级人数</th>
                                    <th class="td-text-center" style="width: 127px;">操作设置</th>
                                </tr>
                            </thead>
                            <tbody id="gridTable"></tbody>
                        </table>
                        <script id="grid" type="text/html">
                            <% for(var i=0;i
                            <list.length;i++){ %>
                                <% var item=list[i]; %>
                                <tr class="gradeX" role="row" id="<%=item.Id %>">
                                    <td><%=item.className %></td>
                                    <td class="td-text-center" name="qvEndDate"><%=item.qvEndDate!=null?item.qvEndDate.substring(0,10):"" %></td>
                                    <td class="td-text-center"><%=item.personCount %></td>
                                    <td class="td-text-center">
                                        <a class="btn btn-sm green" data-target="#stack1" data-toggle="modal" onclick="looking('<%= item.id %>',this)">学生查看</a>
                                    </td>
                                </tr>
                                <%}%>
                        </script>
                    </div>
                    <div class="row">
                        <div class="col-md-5 col-sm-5"><div class="dataTables_info" id="data_info">显示 1 到 10 共 0 条</div></div>
                        <div class="col-md-7 col-sm-7">
                            <!--加载分页控件-->
                            @Html.Partial("DataPager")
                        </div>
                    </div>
                </div>



            </div>
            <!-- END EXAMPLE TABLE PORTLET-->
        </div>
    </div>
</div>
<!--点击的班级id-->
<input type="hidden" id="classId" />

<!--查看学生列表-->
<div id="stack1" class="modal fade" tabindex="-1" data-focus-on="input:first" data-width="660">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title">学生列表</h4>
    </div>
    <div class="modal-body">
        <div style="min-height:450px; width:100%;">
            <!--加载班级列表-->
            <div>
                <table border="1" style="border-collapse:collapse;border:1px solid #e0e0e0;width:100%;font-size:10px;line-height:20px;">
                    <thead>
                        <tr>
                            <th class="banjitd">姓名</th>
                            <th class="banjitd">性别</th>
                            <th class="banjitd">家长姓名</th>
                            <th class="banjitd">关系</th>
                            <th class="banjitd">手机号</th>
                            <th class="banjitd">操作</th>
                        </tr>
                    </thead>
                    <tbody id="banjiTBody"></tbody>
                </table>
                <script id="banjiTable" type="text/html">
                    <% for(var i=0;i
                    <list.length;i++){ %>
                        <% var item=list[i]; %>
                        <tr class="gradeX" role="row" id="<%=item.studentId %>">
                            <td class="banjitd"><%=item.stuName %></td>
                            <td class="banjitd"><%=item.sex %></td>
                            <td class="banjitd"><%=item.jzname %></td>
                            <td class="banjitd"><%=item.guanxi %></td>
                            <td class="banjitd" name="phone"><label><%=item.phone %></label><span style="display:none;"><%=item.password %></span></td>
                            <th class="banjitd">
                                <div class="btn-group btn-group-xs btn-group-solid" style="padding:1px;">
                                    <button class="btn blue" data-toggle="modal" href="#stack2" onclick="showUpdate(this, '<%=item.jzId %>')">修改</button>
                                </div>
                            </th>
                        </tr>
                        <%}%>
                </script>
            </div>
        </div>
    </div>
    @*<div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn btn-outline dark">关闭</button>
            <button type="button" class="btn green">提交</button>
        </div>*@
</div>

<!--修改家长信息-->
<div id="stack2" class="modal fade" tabindex="-1" data-focus-on="input:first">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title">修改家长信息</h4>
    </div>
    <div class="modal-body">
        <div class="form-horizontal" role="form">
            <div class="form-group">
                <label class="control-label col-md-4">手机</label>
                <div class="col-md-5">
                    <input type="text" id="txtPhone" onkeyup="checkPhone()" class="form-control">
                </div>
                <div id="errorMsg" style="line-height:33px;font-size:10px;"></div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-4">密码</label>
                <div class="col-md-5">
                    <input type="text" id="txtPwd" class="form-control">
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <input type="hidden" id="oldPhone" />
            <input type="hidden" id="jzId" />
            <button type="button" data-dismiss="modal" id="closeModel4" class="btn btn-outline dark">关闭</button>
            <button type="button" class="btn green" onclick="submit()">提交</button>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        GridData();
    });

    //验证手机号唯一
    function checkPhone() {
        var phone = $("#txtPhone").val();
        var oldPhone = $("#oldPhone").val();
        var re = /^1\d{10}$/;
        if (phone == "") {
            return;
        }
        if (oldPhone != phone) {
            if (!re.test(phone)) {
                $("#errorMsg").css("color", "red");
                $("#errorMsg").html("手机号有误");
            } else {
                $("#errorMsg").html("");
                AjaxCustom({
                    url: "/ChaKanSetting/CheckPhone",
                    type: "get",
                    parames: { phone: phone },
                    callBack: function (obj) {
                        if (obj.code == 1) {
                            $("#errorMsg").html("手机号已存在");
                            $("#errorMsg").css("color", "red");
                        } else {
                            $("#errorMsg").html("验证通过");
                            $("#errorMsg").css("color", "green");
                        }
                    }
                });
            }
        }
    }

    //提交修改
    function submit() {
        var phone = $("#txtPhone").val();
        var pwd = $("#txtPwd").val();
        var jzId = $("#jzId").val();
        var oldPhone = $("#oldPhone").val();
        var re = /^1\d{10}$/;
        if (phone == "") {
            $("#errorMsg").html("手机号不能为空");
            $("#errorMsg").css("color", "red");
            return;
        }
        if (!re.test(phone)) {
            $("#errorMsg").html("手机号有误");
            $("#errorMsg").css("color", "red");
            return;
        }
        //执行提交数据
        AjaxCustom({
            url: "/ChaKanSetting/UpdateJiaZhang",
            type: "get",
            parames: { phone: phone, pwd: pwd, jzId: jzId, oldPhone: oldPhone },
            callBack: function (obj) {
                if (obj.code == 1) {
                    AlertMsg("修改成功");
                    $("#closeModel4").click();//隐藏弹出层
                    var classId = $("#classId").val();
                    GridClassData(classId);
                } else if (obj.code == 2) {
                    AlertMsg("手机号不能为空");
                } else if (obj.code == 3) {
                    AlertMsg("密码不能为空");
                } else if (obj.code == 4) {
                    AlertMsg("家长主键不能空");
                } else if (obj.code == 5) {
                    $("#errorMsg").html("手机号已存在");
                    $("#errorMsg").css("color", "red");
                } else {
                    AlertMsg(obj.data);
                }
            }
        });
    }


    //弹出班级成员列表
    function looking(classId) {
        $("#classId").val(classId);        
        GridClassData(classId);
    }

    //改变页大小
    function pageSizeChange() {
        var count = $("#changePageSize").val();
        pageSize = count;
        pageIndex = 1;
        GridData();
    }

    //显示修改层
    function showUpdate(thisObj, jzid) {
        $("#errorMsg").html("");
        var phone = $(thisObj).parent().parent().parent().find("td[name=phone]").find("label").html();//手机号
        var password = $(thisObj).parent().parent().parent().find("td[name=phone]").find("span").html();//密码
        $("#txtPhone").val(phone);
        $("#oldPhone").val(phone);
        $("#txtPwd").val(password);
        $("#jzId").val(jzid);
    } 

    //查询班级列表数据
    function GridData() {
        AjaxCustom({
            url: "/ChaKanSetting/ChaKanSettingPageList",
            type: "post",
            showLoading: true,//是否显示遮罩层
            parames: { pageIndex: pageIndex, pageSize: pageSize },
            callBack: function (obj) {
                var start = (obj.data.pageIndex - 1) * pageSize + 1;
                var end = obj.data.pageIndex * pageSize;
                $("#TotalCount").html(obj.data.total);//总行数
                if (obj.data.total == 0) {
                    $("#data_info").html("");
                    $("#gridTable").html("<tr><td colspan=\"6\" style='text-align:center;'><b style='color:red;'>暂无数据</b></td></tr>");
                    document.getElementById('paging1').innerHTML = "";//分页控件代码为空
                } else {
                    if (pageIndex == obj.data.pageCount) {
                        $("#data_info").html("显示 " + start + " 到 " + obj.data.total + " 共 " + obj.data.total + " 条");
                    } else {
                        $("#data_info").html("显示 " + start + " 到 " + end + " 共 " + obj.data.total + " 条");
                    }
                    //加载数据
                    var gridData = template('grid', obj.data);
                    $("#gridTable").html(gridData);
                    //加载分页控件
                    loadPager(obj.data.pageIndex, obj.data.pageCount);
                }
            }
        });
    }

    //查询班级成员数据
    function GridClassData(classid) {
        AjaxCustom({
            url: "/ChaKanSetting/ChaKanClassList",
            type: "post",
            showLoading: true,//是否显示遮罩层
            parames: { classId: classid },
            callBack: function (obj) {
                if (obj.data.list.length == 0) {
                    $("#banjiTBody").html("<tr><td colspan=\"6\" style='text-align:center;'><b style='color:red;'>没有学生</b></td></tr>");
                } else {
                    //加载数据
                    var gridData = template('banjiTable', obj.data);
                    $("#banjiTBody").html(gridData);
                }
            }
        });
    }
</script>
